import { EyeInvisibleOutlined, EyeOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Form, Input } from 'antd'
import { connect } from 'dva'
import { trim } from 'lodash-es'
import { useState } from 'react'

import AekForm from '@/components/AekForm'
import { getBasicFn } from '@/utils/dvaUtil/index'

import logo from './imgs/logo_white.svg'
import styles from './index.module.less'

const USERNAME = 'username'
const PASSWORD = 'password'

/**
 *
 * @param {{ app: import('@/models/app').state}} param0
 * @returns
 */
const Login = ({ app, loading }) => {
  const { toAction, getLoading } = getBasicFn({ namespace: 'app', loading })

  const { needEbeiFlag } = app

  const [form] = AekForm.useForm()
  const [passwordVisible, setPasswordVisible] = useState(false)

  const onFinish = async payload => {
    const params = {
      ...payload,
    }
    await toAction('silentLogin', params)
    window.dvaApp?._history?.push('/')
  }

  return (
    <div className={`g-page-login ${needEbeiFlag ? 'needEbeiFlag' : ''}`}>
      {needEbeiFlag && <img src={logo} alt='logo' className='img-logo' />}
      <div className='login-form'>
        <div className='login-form-inner'>
          <div className='form-title'>欢迎登录</div>
          <div className='form-title-desc'>用智慧服务优化医疗服务产业链</div>
          <Form form={form} onFinish={onFinish}>
            <Form.Item
              name={USERNAME}
              validateTrigger={false}
              rules={[
                {
                  transform: value => trim(value),
                  required: true,
                  message: '请输入您的帐号',
                },
              ]}
            >
              <Input
                className={styles.userNameInput}
                placeholder='用户名'
                autoComplete='off'
                allowClear
                prefix={<UserOutlined />}
              />
            </Form.Item>
            <Form.Item
              name={PASSWORD}
              {...{
                validateTrigger: false,
                validateFirst: true,
                rules: [
                  {
                    transform: value => trim(value),
                    required: true,
                    message: '请输入您的密码',
                  },
                  {
                    transform: value => trim(value),
                    min: 6,
                    max: 20,
                    message: '密码长度(6至20位)',
                  },
                  {
                    validator: (_, value) => {
                      if (/\s/.test(value.trim())) {
                        return Promise.reject(Error('密码不能包含空格'))
                      }
                      return Promise.resolve()
                    },
                  },
                ],
              }}
            >
              <Input
                type={passwordVisible ? 'text' : 'password'}
                allowClear
                className={styles.passwordInput}
                autoComplete='off'
                prefix={<LockOutlined />}
                suffix={
                  <div>
                    {passwordVisible ? (
                      <EyeOutlined className={styles.visibleIcon} onClick={() => setPasswordVisible(false)} />
                    ) : (
                      <EyeInvisibleOutlined className={styles.visibleIcon} onClick={() => setPasswordVisible(true)} />
                    )}
                  </div>
                }
                placeholder='密码'
              />
            </Form.Item>
            <Form.Item>
              <Button type='primary' htmlType='submit' size='large' block loading={getLoading('silentLogin')}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
      {needEbeiFlag && (
        <div className='copyright-box'>
          <span>Copyright © 2013-2020 杭州爱怡康科技有限公司</span>
          <span className='mx-10px'>|</span>
          <img
            src='//img.ebei99.com/common/ghs.png'
            alt='浙公网安备'
            style={{ height: 18, verticalAlign: 'middle', marginRight: 5 }}
          />
          <span>浙公网安备 33010602003513号</span>
          <span className='mx-10px'>|</span>
          <a href='http://beian.miit.gov.cn' target='_blank'>
            浙ICP备13028265号
          </a>
          <span className='mx-10px'>|</span>
          <span>互联网药品信息服务资格证书 (浙)-经营性-2020-0029</span>
        </div>
      )}
    </div>
  )
}

export default connect(store => ({
  app: store.app,
  loading: store.loading,
}))(Login)
